<template>
	<view class="activity">
		<u-navbar :background="background" :border-bottom="false" back-icon-color="#FFF" :placeholder="false">
		</u-navbar>
		<view class="head-bg" :style="{'margin-top': height + 'px'}">
			<image :src="detail.activity_img" mode="aspectFit "></image>
		</view>
		<block v-if="finished && !passed">
			<view class="info" v-if="detail.is_join_activity === 0">
				<view class="title">
					<image src="https://xyshop.outletds.com/img/activity-bg.jpg"></image>
					<text class="content">选择你想要的礼券</text>
				</view>
				<view class="coupons">
					<card-swiper :list="coupons" @swiperChange="selectCoupon" v-if="coupons.length > 2">

					</card-swiper>
					<view class="list" v-else>
						<view :class="{'coupon': true, 'checked': couponIndex === index}"
							v-for="(item, index) in coupons" :key="index" @click="selectCoupon(index)">
							<u-icon v-if="index === couponIndex" name="checkmark-circle-fill" class="checked-icon"
								size="30rpx" color="#FC602B"></u-icon>
							<image :src="item.icon" mode="aspectFill"></image>
							<text class="name">{{item.coupon_name}}</text>
							<text class="num">剩余{{item.surplus_num}}份</text>
						</view>
					</view>
				</view>
				<view class="remark">
					邀请<text class="num">{{curCoupon.assist_num}}</text>位好友为你节省{{curCoupon.coupon_denomination}}元开通VIP会员
				</view>
				<view class="start-btn" @click="selectPrize">邀好友,获得此礼品</view>
			</view>
			<!-- 任务进行中 -->
			<view class="info task" v-else>
				<view class="title">
					<image src="https://xyshop.outletds.com/img/activity-bg.jpg"></image>
					<text class="content">{{title}}</text>
				</view>
				<view class="frends">
					<text class="name">已助力好友</text>
					<view class="group little" v-if="detail.prize.assist_num <= 3">
						<button open-type="share" :class="{'item': true, 'has-person': detail.invitation_users[index]}"
							v-for="(item, index) in detail.prize.assist_num" :key="index">
							<image class="avatar" :src="detail.invitation_users[index].headavatar"
								v-if="detail.invitation_users[index]" />
							<u-icon name="plus" size="40" v-else />
						</button>
					</view>
					<scroll-view class="group" v-else scroll-x>
						<view class="more">
							<button open-type="share"
								:class="{'item': true, 'has-person': detail.invitation_users[index]}"
								v-for="(item, index) in detail.prize.assist_num" :key="index">
								<image class="avatar" :src="detail.invitation_users[index].headavatar"
									v-if="detail.invitation_users[index]" />
								<u-icon name="plus" size="40" v-else />
							</button>
						</view>
					</scroll-view>
				</view>
				<view class="remark">
					邀请<text
						class="num">{{detail.prize.assist_num}}</text>位好友为你节省{{detail.prize.coupon_denomination}}元开通VIP会员
				</view>
				<view class="coupon-select">
					<view class="number">
						<image :src="detail.prize.icon" mode="aspectFill"></image>
					</view>
					<view class="name"><text
							class="num">{{detail.prize.coupon_denomination}}</text>元{{detail.prize.coupon_name}}</view>
				</view>
				<view class="btns">
					<view class="recive-btn" @click="reciveCoupon" v-if="detail.join_activity_info.status === 2">
						立即兑换使用
					</view>
					<block v-else>
						<view class="reset-btn" @click="showAbandon = true">重选礼品</view>
						<button class="share-btn" open-type="share">立即邀请好友</button>
					</block>

				</view>
			</view>
		</block>
		<view class="rule">
			<view class="title">
				<image src="https://xyshop.outletds.com/img/activity-bg.jpg"></image>
				<text class="content">快速了解活动规则</text>
			</view>
			<u-parse :html="detail.activity_rule" class="detail" />
		</view>
		<abandonModal :value.sync="showAbandon" @confirm="resetPrize"></abandonModal>
		<successModal :value.sync="showSuccess" @reset="resetPrize"></successModal>
	</view>
</template>

<script>
	import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper"
	import abandonModal from "./components/abandonModal.vue"
	import successModal from "./components/successModal.vue"
	import {
		getActivityDetailApi,
		getActivityCoupnApi,
		selectPrizeApi
	} from "@/api/activity.js"
	import {
		reciveCouponApi
	} from "@/api/coupon.js"
	import {
		mapGetters,
		mapActions
	} from "vuex"
	let timer = null
	export default {
		data() {
			return {
				coupons: [],
				background: {
					background: 'rgba(243, 162, 152, 0)'
				},
				nums: 5,
				info: {
					coupon_type: 2,
					coupon_name: 'VIP优惠券'
				},
				detail: {},
				showAbandon: false,
				showSuccess: false,
				passed: false,
				couponIndex: 0,
				timeCount: 0,
				finished: false,
				height: 0
			}
		},
		components: {
			cardSwiper,
			abandonModal,
			successModal
		},
		computed: {
			...mapGetters(['userInfo']),
			curCoupon() {
				return this.coupons[this.couponIndex] || {}
			},
			title() {

				let status = (this.detail.join_activity_info || {}).status
				let str = ""
				switch (status) {
					case 1:
						str = `剩余时间${this.surplusTime}`
						break;
					case 2:
						str = '你已完成本次邀请'
						break;
					default:
						str = '任务失败,请重新选择'
				}
				return str
			},
			surplusTime() {
				let time = this.timeCount
				let hours = parseInt(time / 3600)
				time -= hours * 3600
				let minutes = parseInt(time / 60)
				let seconds = time % 60
				return `${hours}:${minutes}:${seconds}`
			}
		},
		onLoad(opt) {
			this.getData()
			this.getBarheight()
			opt.user_id && this.saveShareId(opt.user_id);
		},
		onUnload() {
			clearInterval(timer)
		},
		onPageScroll({
			scrollTop
		}) {
			this.background.background = `rgba(243, 162, 152, ${scrollTop / 100})`
		},
		methods: {
			...mapActions(["saveShareId"]),
			async getData() {
				if (!this.userInfo.id) {
					this.$utils.toast("请先登录")
					uni.switchTab({
						url: "/pages/tabs/my/my",
						fail: (err) => {
							console.log(err);
						}
					})
					return
				}
				let {
					data
				} = await getActivityDetailApi()
				if (data.length === 0) {
					this.passed = true
					this.$utils.toast("活动已结束")
					return
				}
				this.detail = data[0]
				if (this.detail.is_join_activity == 1 && this.detail.join_activity_info.status === 1) {
					console.log(this.detail);
					let times = (this.detail.prize.prize_end_time * 1000) - new Date()
						.getTime()
					times = parseInt(times / 1000)
					this.timeCount = times
					timer = setInterval(() => {
						if (this.timeCount > 1) {
							this.timeCount -= 1
						} else {
							this.detail.join_activity_info.status = 3
							// this.getData()
						}
					}, 1000)
				}
				// 完成
				this.finished = true
				this.getCouponList(this.detail.id)
			},
			async reciveCoupon() {
				await reciveCouponApi({
					coupon_id: this.detail.prize.id
				})
				this.showSuccess = true
			},
			getBarheight() {
				let data = uni.getSystemInfoSync()
				this.height = ~(data.statusBarHeight + 50)
				console.log(this.height);
			},
			selectCoupon(index) {
				this.couponIndex = index
			},
			async getCouponList(id) {
				let {
					data
				} = await getActivityCoupnApi({
					activity_id: id
				})
				this.coupons = data
			},
			// 选择礼品，并且开始任务
			async selectPrize() {
				let coupon = this.coupons[this.couponIndex]
				console.log(this.detail);
				let params = {
					activity_id: this.detail.id,
					prize_id: coupon.id,
					flag: 1
				}
				let {
					code,
					data
				} = await selectPrizeApi(params)
				if (code === 200) {
					this.$utils.success("选择成功")
					this.getData()
				}
			},
			async resetPrize() {
				let params = {
					activity_id: this.detail.id,
					prize_id: this.detail.prize.id,
					flag: 2
				}
				let {
					code,
				} = await selectPrizeApi(params)
				if (code === 200) {
					this.getData()
				}
			}
		},
		onShareAppMessage: function(ops) {
			return {
				title: '限时！能不能领到奥莱VIP就看你了', // 分享名称
				path: `/pages/common/activity/activity?user_id=${this.userInfo.id}`, // 点击分享后的链接要来到的页面的路径已经对应需要的参数
				imageUrl: 'https://shop.outletds.com/img/activity.png',
				success: function(res) {
					// 分享成功之后的操作
					console.log("分享成功:" + JSON.stringify(res));
				},
				fail: function(res) {
					// 分享失败之后的操作
					console.log("分享失败:" + JSON.stringify(res));
				},
			};
		},
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>
<style>
	button::after {
		border: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}
</style>
